<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8" />	
	<title>ARTEFACT - Art and Technology Factory Indonesia</title>
		
	<meta name="robots" content="">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--[if lt IE 9]>
	    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- This file is part of a site template for sale at themeforest.net.
    See: http://themeforest.net/user/Dilipkumar
    Copyright 2013 Dilip Kumar -->

	<!-- CSS Files -->
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/foundation.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" href="css/ico.css"/>
	<link rel="stylesheet" type="text/css" href="css/flexslider.css"/>
	<link rel="stylesheet" type="text/css" href="css/custom.css"/>
	<!-- FAVICON-->
	<link rel="shortcut icon" href="images/favicon.ico">

	<!-- Google Webfont -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

	<!-- jQuery Files -->
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/contact.js"></script>
	<script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script>
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
	<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
	<script type="text/javascript" src="js/jquery.nav.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<!-- Header section -->
<header>
	<div class="top-wrap">
		<div class="row">
			<div class="twelve columns">
			
				<!-- Logo content -->
				<div class="four columns logo">
					<h1><a href="#">ART<span>EFACT</span></a></h1>
				</div>

				<!-- Navmenu content -->
				<div class="eight columns">
					<ul class="top-nav">
						<li class="current"><a href="#top">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#features">Features</a></li>
						<li><a href="#team">Team</a></li>
						<li><a href="#contact">Contact</a></li>
						<li><a href="/work.html">See Our Work</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- Header section -->

<!-- Slider section -->
<section id="top">
	<div class="row">
		<div class="twelve columns">
			<div class="space90"></div>

			<!-- Slider content -->
			<div class="six columns">
				<div id="main-slider" class="flexslider">
					<ul class="slides">
						<li><img src="demo/slide/1.png" alt="" /></li>
						<li><img src="demo/slide/2.png" alt="" /></li>
					</ul>
				</div>
			</div>

			<!-- Content right -->
			<div class="six columns top-info">
				<h3>We create <span>Awesome Apps</span></h3>
				<p>Praesent consequat eu arcu eget tincidunt. Sed congue suscipit ornare sed facilisis accumsan viverra. Mauris leo leo eget orci et dapibus odio. </p>
			</div>
		</div>
	</div>
</section>
<!-- Slider section -->
<!-- about section -->
<section id="about">
	<div class="row">
			<div class="appsblock whiteblock">
				<a name="apps"></a>
				<div class="block-container">
					<div class="apps">
						<div class="slider">
							<div class="navigation navigation-left">
								<i class="icon-circle-arrow-left"></i>
							</div>
							<div class="navigation navigation-right">
								<i class="icon-circle-arrow-right"></i>
							</div>

							<div class="rotator">

								<!-- Place your slides here -->

								<div class="slide active">
									<div class="picture">
										<img src="images/slider3.png">
									</div>
									<div class="container aleft">
										<h1 class="title">Who We Are :</h1>
										<div class="description">
											Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
											nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
											erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
											et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
										</div>
									</div>
								</div>

								<div class="slide">
									<div class="container aright">
										<h1 class="title">What We Do :</h1>
										<div class="description">
											Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
											nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
											erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
											et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
										</div>
									</div>
									<div class="picture">
										<img src="images/slider2.png">
									</div>
								</div>

								<div class="slide">
									<div class="picture">
										<img src="images/slider.png">
									</div>
									<div class="container aleft">
										<h1 class="title">We Syncronise it !</h1>
										<div class="description">
											Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
											nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
											erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
											et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
</section>
<!-- about section -->
<!-- Features/services section -->
<section id="features">
	<div class="row">
		<div class="twelve columns">
			<div class="four columns features-content">
				<div class="ico" style="color:#2ecc71;"><i class="icon-resize"></i></div>
				<div class="features-info">
					<h4>Responsive</h4>
					<p>This theme will look great in all devices.</p>
				</div>
			</div>

			<div class="four columns features-content">
				<div class="ico" style="color:#3498db;"><i class="icon-form"></i></div>
				<div class="features-info">
					<h4>Working form</h4>
					<p>A working contact form so easy to setup.</p>
				</div>
			</div>

			<div class="four columns features-content">
				<div class="ico" style="color:#9b59b6;"><i class="icon-heartsparkle"></i></div>
				<div class="features-info">
					<h4>Designed with love</h4>
					<p>We designed this theme with lot of creativity and love.</p>
				</div>
			</div>
		</div>

		<div class="twelve columns">
			<div class="four columns features-content">
				<div class="ico" style="color:#e67e22;"><i class="icon-code"></i></div>
				<div class="features-info">
					<h4>Clean coded</h4>
					<p>Clean coded. Will make you update and run your site in few hours.</p>
				</div>
			</div>

			<div class="four columns features-content">
				<div class="ico" style="color:#e74c3c;"><i class="icon-htmlfive"></i></div>
				<div class="features-info">
					<h4>HTML5 framework</h4>
					<p>Designed with the advanced HTML5 foundation framework.</p>
				</div>
			</div>

			<div class="four columns features-content">
				<div class="ico" style="color:#f1c40f;"><i class="icon-theme-style"></i></div>
				<div class="features-info">
					<h4>Mutiple colors</h4>
					<p>You can use your own colors easily. Unlimited no restrictions.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Features/services section -->

<!-- Team section -->
<section id="team">
	<div class="row">
		<div class="twelve columns">
			<h3><i class="icon-user"></i>People behind this amazing app</h3>
			<div class="three columns team-content">
				<div class="team-img">	
					<span></span>
					<img src="demo/clients/1.png" alt=""/>
				</div>
				<h4>Jerslin doe</h4>
				<h5>App Developer</h5>

				<!-- Social content -->
				<ul class="team-social">
					<li><a href="#" style="color:#3fbcef;"><i class="icon-twitter"></i></a></li>
					<li><a href="#" style="color:#314396;"><i class="icon-facebook"></i></a></li>
					<li><a href="#" style="color:#52443c;"><i class="icon-instagram"></i></a></li>
				</ul>
			</div>

			<div class="three columns team-content">
				<div class="team-img">	
					<span></span>
					<img src="demo/clients/2.png" alt=""/>
				</div>

				<h4>Edward Doe</h4>
				<h5>UX Designer</h5>

				<!-- Social content -->
				<ul class="team-social">
					<li><a href="#" style="color:#3fbcef;"><i class="icon-twitter"></i></a></li>
					<li><a href="#" style="color:#ec6b76;"><i class="icon-dribbble"></i></a></li>
					<li><a href="#" style="color:#52443c;"><i class="icon-instagram"></i></a></li>
				</ul>
			</div>

			<div class="three columns team-content">
				<div class="team-img">	
					<span></span>
					<img src="demo/clients/3.png" alt=""/>
				</div>
				<h4>Marlen Doe</h4>
				<h5>IOS Specialist</h5>

				<!-- Social content -->
				<ul class="team-social">
					<li><a href="#" style="color:#3fbcef;"><i class="icon-twitter"></i></a></li>
					<li><a href="#" style="color:#314396;"><i class="icon-facebook"></i></a></li>
					<li><a href="#" style="color:#00709e;"><i class="icon-linkedin"></i></a></li>
				</ul>
			</div>

			<div class="three columns team-content">
				<div class="team-img">	
					<span></span>
					<img src="demo/clients/4.png" alt=""/>
				</div>
				<h4>Simone Doe</h4>
				<h5>Team manager</h5>
				
				<!-- Social content -->
				<ul class="team-social">
					<li><a href="#" style="color:#3fbcef;"><i class="icon-twitter"></i></a></li>
					<li><a href="#" style="color:#314396;"><i class="icon-facebook"></i></a></li>
					<li><a href="#" style="color:#52443c;"><i class="icon-instagram"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- Team section -->
<!-- Contact section -->
<section id="contact">
	<div class="row">
		<div class="twelve columns">
			<h3><i class="icon-envelope"></i>Reach us. Request a Quote.</h3>
			
			<!-- Map-->
			<div class="six columns">
				<iframe src="https://mapsengine.google.com/map/u/0/embed?mid=zfst_0nYYQwo.kz5Xy2jF6z_w" width="440" height="280"></iframe>
			</div>

			<!-- Contact info -->
			<div class="six columns">
				<ul class="contact-info">
					<li><em><i class="icon-homealt"></i></em><span>No 53, Abc Street, Some country, SC 123456</span></li>
					<li><em><i class="icon-emailalt"></i></em><span>Enquiry@website.com</span></li>
					<li><em><i class="icon-phoneold"></i></em><span>+1800 1234 56789</span></li>
					<li><em><i class="icon-link"></i></em><span>http://www.dkpixels.com</span></li>
				</ul>

				<ul class="social-info">
					<li class="f-twitter"><a href="#"><i class="icon-twitter"></i></a></li>
					<li class="f-fb"><a href="#"><i class="icon-facebook"></i></a></li>
					<li class="f-dribble"><a href="#"><i class="icon-dribbble"></i></a></li>
					<li class="f-skype"><a href="#"><i class="icon-skype"></i></a></li>
					<li class="f-linkedin"><a href="#"><i class="icon-linkedin"></i></a></li>
					<li class="f-instagram"><a href="#"><i class="icon-instagram"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- Contact section -->

<!-- Footer section -->
<footer class="footer">
	<div class="row">
		<div class="twelve columns footer-inner">
			<p>&copy; 2014. <a href="#">ARTEFACT</a>. All Rights Reserved.</p>
		</div>
	</div>
</footer>
<!-- Footer section -->

</body>
</html>